<template>
  <div class="app-container">
    <el-row style="margin-bottom: 1px" type="flex" justify="space-between">
      <el-button-group>
        <div v-if="title == '编辑'" style="display: inline-block">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-refresh"
            @click="editBtnDisabled = !editBtnDisabled"
          >编辑</el-button>
          <el-button
            :disabled="editBtnDisabled"
            style="display: inline-block; margin-left: 0 !important"
            size="mini"
            type="primary"
            icon="el-icon-folder-checked"
            @click="submitForm('form')"
          >保存</el-button>
        </div>

        <el-button
          v-if="title != '编辑'"
          style="display: inline-block; margin-left: 0 !important"
          size="mini"
          type="primary"
          icon="el-icon-folder-checked"
          @click="submitForm('form')"
        >保存</el-button>

        <div v-if="title == '编辑'" style="display: inline-block">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            icon="el-icon-refresh"-->
<!--            @click="prints"-->
<!--          >打印</el-button>-->
<!--          <el-button-->
<!--            v-action="'warehouseOut@index'"-->
<!--            size="mini"-->
<!--            type="warning"-->
<!--            @click="download"-->
<!--          >下载</el-button>-->
<!--          <el-button-->
<!--            v-action="'warehouseOut@index'"-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            @click="downloadDeliver"-->
<!--          >下载发货单</el-button>-->

<!--          <el-button-->
<!--            v-if="form.edi_json"-->
<!--            size="mini"-->
<!--            type="primary"-->
<!--            @click="downloadf"-->
<!--          >下载发货单</el-button>-->
        </div>
      </el-button-group>
    </el-row>
    <el-form
      ref="form"
      inline-message
      :disabled="editBtnDisabled"
      :model="form"
      :rules="rules"
      class="demo-ruleForm page-top"
      :inline="true"
      label-width="100px"
      size="mini"
      :label-position="'left'"
      style="height: 160px"
    >
      <!-- <el-row>
        <el-col :span="5">
          <el-form-item v-if="title == '编辑'" label="主单编号">
            <span style="margin-right: 40px">{{
              this.$route.query.warehouse_out_id
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目和委托方" prop="project_id">
            <el-cascader
              v-model="form.project_id"
              :options="project"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户业务单号" prop="customer_business_number">
            <el-input v-model="form.customer_business_number" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="商品总数量" prop="goods_number">
            <el-input v-model="form.goods_number" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物托盘数量">
            <el-input v-model="form.new_tray_num" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="运单号">
            <el-input v-model="form.waybill" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="运输方式" prop="transport_type">
            <el-select
              v-model="form.transport_type"
              placeholder="运输方式"
              filterable
              allow-create
              clearable
              size="small"
            >
              <el-option label="陆运" value="陆运" />
              <el-option label="海运" value="海运" />
              <el-option label="空运" value="空运" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物箱数">
            <el-input v-model="form.new_box_num" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物尺寸">
            <el-input
              v-model="form.new_goods_dimension"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="货物金额">
            <el-input
              v-model="form.new_goods_price"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="条款">
            <el-input v-model="form.clause"/>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <div class="SHIPPER" style="width: 260px">
          <el-form-item class="aaa" label="送货方">
            <el-select v-model="serial_1" value-key="id" @change="change" clearable filterable placeholder="请选择">
              <el-option
                key="0"
                label=""
                value=""
                disabled>
                <span style="float: left;color: #8492a6;">客户代码</span>
                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>
              </el-option>
              <el-option
                v-for="item in clientList"
                :key="item.serial_number"
                :label="`${item.serial_number}（${item.account_key}）`"
                :value="item">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>
              </el-option>
            </el-select>
            <div
              style="width:150px"
              v-if="form.shipper_serial_number"
            >
              <div>
                <span>客户名称：</span
                ><span>{{ form.shipper_relation_name }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        </el-col>
        <el-col :span="5">
          <div class="CONSIGNEE" style="width: 260px">
          <el-form-item class="aaa" label="收货方">
            <el-select v-model="serial_2" value-key="id" @change="change2" clearable filterable placeholder="请选择">
              <el-option
                key="0"
                label=""
                value=""
                disabled>
                <span style="float: left;color: #8492a6;">客户代码</span>
                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>
              </el-option>
              <el-option
                v-for="item in clientList"
                :key="item.serial_number"
                :label="`${item.serial_number}（${item.account_key}）`"
                :value="item">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>
              </el-option>
            </el-select>
            <div
              style="width:150px"
              v-if="
                form.consignee_serial_number
              "
            >
              <div>
                <span>客户名称：</span
                ><span>{{ form.consignee_relation_name }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        </el-col>
        <el-col :span="5">
          <div class="CONSIGNEE" style="width: 260px">
          <el-form-item class="aaa"  label="送货地">
            <el-select v-model="serial_3" value-key="id" @change="change3" clearable filterable placeholder="请选择">
              <el-option
                key="0"
                label=""
                value=""
                disabled>
                <span style="float: left;color: #8492a6;">客户代码</span>
                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>
              </el-option>
              <el-option
                v-for="item in clientList"
                :key="item.serial_number"
                :label="`${item.serial_number}（${item.account_key}）`"
                :value="item">
                <span style="float: left">{{ item.serial_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>
              </el-option>
            </el-select>
            <div
              style="width:150px"
              v-if="form.deliver_serial_number"
            >
              <div>
                <span>客户名称：</span
                ><span>{{ form.deliver__relation_name }}</span>
              </div>
            </div>
          </el-form-item>
        </div>
        </el-col>
      </el-row> -->
      <div style="display: flex">
        <div style="display: flex; flex-direction: column; width: 300px">
          <el-form-item v-if="title == '编辑'" label="主单编号">
            <span style="font-size: 12px;">{{
              this.$route.query.warehouse_out_id
            }}</span>
          </el-form-item>
          <el-form-item label="项目和委托方" prop="project_id">
            <el-cascader
              v-model="form.project_id"
              :options="project"
              style="width: 100%"
            />
          </el-form-item>
<!--          <el-form-item label="客户业务单号" prop="customer_business_number">-->
<!--            <el-input v-model="form.customer_business_number" />-->
<!--          </el-form-item>-->

          <el-form-item label="商品总数量" prop="goods_number">
            <el-input v-model="form.goods_number" />
          </el-form-item>

<!--          <el-form-item label="货物托盘数量">-->
<!--            <el-input v-model="form.new_tray_num" />-->
<!--          </el-form-item>-->

          <el-form-item label="运单号">
            <el-input v-model="form.waybill" />
          </el-form-item>

<!--          <el-form-item label="货物毛重">-->
<!--            <el-input v-model="form.new_gross_weight" />-->
<!--          </el-form-item>-->
<!--           <el-form-item label="包装箱">-->
<!--            <el-select-->
<!--              v-model="form.packing_box"-->
<!--              multiple-->
<!--              clearable-->
<!--              collapse-tags-->
<!--              placeholder="请选择包装箱"-->
<!--              style="width: 100%">-->
<!--              <el-option-->
<!--                v-for="i in 12"-->
<!--                :key="i"-->
<!--                :label="`包装箱${i}`"-->
<!--                :value="`包装箱${i}`"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="支持导出">
            <el-switch
              v-model="form.support_export"
              :active-value="1"
              :inactive-value="0"
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
        </div>

        <div style="display: flex; flex-direction: column; width: 290px">
<!--          <el-form-item label="运输方式" prop="transport_type">-->
<!--            <el-select-->
<!--              v-model="form.transport_type"-->
<!--              placeholder="运输方式"-->
<!--              filterable-->
<!--              allow-create-->
<!--              clearable-->
<!--              size="small"-->
<!--              style="margin-left: -40px"-->
<!--            >-->
<!--              <el-option label="陆运" value="陆运" />-->
<!--              <el-option label="海运" value="海运" />-->
<!--              <el-option label="空运" value="空运" />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="货物箱数">-->
<!--            <el-input v-model="form.new_box_num" style="margin-left: -40px" />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物尺寸">-->
<!--            <el-input-->
<!--              v-model="form.new_goods_dimension"-->
<!--              style="margin-left: -40px"-->
<!--            />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="货物金额">-->
<!--            <el-input-->
<!--              v-model="form.new_goods_price"-->
<!--              style="margin-left: -40px"-->
<!--            />-->
<!--          </el-form-item>-->

<!--          <el-form-item label="条款">-->
<!--            <el-input v-model="form.clause" style="margin-left: -40px" />-->
<!--          </el-form-item>-->

        </div>

<!--        <div class="SHIPPER" style="width: 300px;">-->
<!--          <el-form-item class="aaa" style="margin-left: -40px" label="送货方">-->
<!--            <div style="display: inline;position: relative;left: -50px;" @click="song_click()">-->
<!--              <el-input v-model="song_value" type="text"  readonly />-->
<!--            </div>-->
<!--&lt;!&ndash;            <el-select v-model="serial_1" value-key="id" clearable filterable placeholder="请选择" style="margin-left:-50px;width:200px" @change="change">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option&ndash;&gt;-->
<!--&lt;!&ndash;                key="0"&ndash;&gt;-->
<!--&lt;!&ndash;                label=""&ndash;&gt;-->
<!--&lt;!&ndash;                value=""&ndash;&gt;-->
<!--&lt;!&ndash;                disabled&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: left;color: #8492a6;">客户代码</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option&ndash;&gt;-->
<!--&lt;!&ndash;                v-for="item in clientList"&ndash;&gt;-->
<!--&lt;!&ndash;                :key="item.serial_number"&ndash;&gt;-->
<!--&lt;!&ndash;                :label="`${item.serial_number}（${item.account_key}）`"&ndash;&gt;-->
<!--&lt;!&ndash;                :value="item"&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: left">{{ item.serial_number }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
<!--            <div-->
<!--              style="position: relative;left: -50px;width: 200px;height:50px;"-->
<!--            >-->
<!--              <span>{{ form.shipper_relation_name }}</span>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </div>-->

        <div class="CONSIGNEE" style="width: 300px">
          <el-form-item class="aaa" style="margin-left: -40px" label="收货方">
            <div style="display: inline-block;position: relative;left: -50px;" @click="shou_click()">
              <el-input v-model="shou_value" type="text"  readonly />
            </div>
<!--            <el-select v-model="serial_2" value-key="id" clearable filterable placeholder="请选择" style="margin-left:-50px;width:200px" @change="change2">-->
<!--              <el-option-->
<!--                key="0"-->
<!--                label=""-->
<!--                value=""-->
<!--                disabled-->
<!--              >-->
<!--                <span style="float: left;color: #8492a6;">客户代码</span>-->
<!--                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>-->
<!--              </el-option>-->
<!--              <el-option-->
<!--                v-for="item in clientList"-->
<!--                :key="item.serial_number"-->
<!--                :label="`${item.serial_number}（${item.account_key}）`"-->
<!--                :value="item"-->
<!--              >-->
<!--                <span style="float: left">{{ item.serial_number }}</span>-->
<!--                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>-->
<!--              </el-option>-->
<!--            </el-select>-->
            <div
              style="position: relative;left: -50px;width: 200px;height:100px;"
            >
              <span style="font-size: 12px;"> {{ form.consignee_addr }}</span>
            </div>
          </el-form-item>
        </div>
<!--        <div class="CONSIGNEE" style="width: 300px">-->
<!--          <el-form-item class="aaa" style="margin-left: -40px" label="送货地">-->
<!--            <div style="display: inline-block;position: relative;left: -50px;" @click="di_click()">-->
<!--              <el-input v-model="di_value" type="text"  readonly />-->
<!--            </div>-->
<!--&lt;!&ndash;            <el-select v-model="serial_3" value-key="id" clearable filterable placeholder="请选择" style="margin-left:-50px;width:200px" @change="change3">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option&ndash;&gt;-->
<!--&lt;!&ndash;                key="0"&ndash;&gt;-->
<!--&lt;!&ndash;                label=""&ndash;&gt;-->
<!--&lt;!&ndash;                value=""&ndash;&gt;-->
<!--&lt;!&ndash;                disabled&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: left;color: #8492a6;">客户代码</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: right; color: #8492a6; font-size: 13px">客户简称</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-option&ndash;&gt;-->
<!--&lt;!&ndash;                v-for="item in clientList"&ndash;&gt;-->
<!--&lt;!&ndash;                :key="item.serial_number"&ndash;&gt;-->
<!--&lt;!&ndash;                :label="`${item.serial_number}（${item.account_key}）`"&ndash;&gt;-->
<!--&lt;!&ndash;                :value="item"&ndash;&gt;-->
<!--&lt;!&ndash;              >&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: left">{{ item.serial_number }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.account_key }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-select>&ndash;&gt;-->
<!--            <div-->
<!--              style="position: relative;left: -50px;width: 200px;height:100px;"-->
<!--            >-->
<!--              <span>{{ form.deliver__relation_name }}</span>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--        </div>-->

      </div>

    </el-form>
    <!-- <warehousingGoods :_warehousing_id="warehousing_id" :_warehousing_status="warehousing_status" @getRow="getRow" /> -->
    <el-row
      class="page-center"
      style="padding-top: -0.0625rem; border-top: 0.0625rem solid #dcdfe6"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="货物信息" name="first">
          <warehouseOutSon
            ref="warehouseOutSon"
            :_warehouse_out_id="warehouse_out_id2"
            @getRow="getRow"
            @emptyHide="emptyHideFunc"
          />
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second">其他信息</el-tab-pane>
      </el-tabs>
    </el-row>

    <el-row
      v-if="activeName == 'first'"
      class="page-footer"
      style="padding-top: -0.0625rem; border-top: 0.0625rem solid #dcdfe6"
    >
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="货物详细信息">
          <el-empty v-if="clickGoodsForm == null" :image-size="200" />
          <el-row v-else>
            <warehouseOutSonAddEdit
              ref="warehouseOutSonAddEdit"
              :residue="residueNum"
              :exist-number="existNumber"
              :old_num="row_old_num"
              :num="sy_num"
              :open1.sync="emptyHide"
              :warehouseoutid="this.$route.query.warehouse_out_id"
              :form="clickGoodsForm"
              :title="title"
            />
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <Print
      :open-one.sync="openOne"
      :warehouse-id="this.$route.query.warehouse_out_id"
    />
    <CustomDialog :visible.sync="dialogVisible" :on-confirm="handleConfirm" :diaclose="diaclose"/>
  </div>
</template>

<script>
import warehouseOutSon from '@/views/storehouse/warehouseOutSon'
import warehouseOutSonAddEdit from '@/views/storehouse/warehouseOutSon/AddEdit'

import { providerList } from '@/api/basics'
import { att } from '@/api/stock'
import {
  getProject,
  createWarehouseOut,
  updateWarehouseOut,
  warehouseOutDetail, exportExcel,exportPdf,exportPdf1,exportDeliver
} from '@/api/storehouse'
import { getArea } from '@/utils/get-china-area'
import Print from '@/views/storehouse/warehouseOut2/Print'
import CustomDialog from '@/components/CustomDialog/index.vue'
import { run } from 'runjs'
export default {
  name: 'StorehouseWarehouseOut2AddEdit',
  components: {
    warehouseOutSon,
    warehouseOutSonAddEdit,
    Print,
    CustomDialog
  },
  data() {
    const validateOrg = (rule, value, callback) => {
      console.log(this.form.project_id)
      if (!(this.form.project_id instanceof Array)) {
        callback(new Error('项目和委托方不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      current_click: '',
      shou_value: '',
      song_value: '',
      di_value: '',
      serial_1: {},
      serial_2: {},
      serial_3: {},
      options: [],
      residueNum: 0,
      existNumber: 0,
      sy_num: 0, // 剩余数量
      row_old_num: 0,
      warehouse_out_id2: '',
      emptyHide: false,
      activeName1: false,
      warehouse_out_id: false,
      openOne: false,
      editBtnDisabled: false,
      activeName: 'first',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime())
              end.setTime(end.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '三个月前',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 90)
              start.setTime(Date.parse('2000/01/01'))
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      tabPosition: 'top',

      clickGoodsForm: null,
      // 遮罩层
      loading: true,
      open: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      project: [],
      // openOne: false,
      info: '',
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        supplier_name: undefined
      },
      form: {
        support_export: 1, // 默认支持导出
      },
      show: false,
      ids: [],
      multiple: false,
      warehouseId: '',
      rules: {
        project_id: [{ type: 'array', required: true, validator: validateOrg }],
        // customer_order_type: [
        //   { required: true, message: '请填写客户订单类型', trigger: 'change' }
        // ],
        transport_type: [
          { required: true, message: '请填写运输方式', trigger: 'change' }
        ],
        goods_number: [
          { required: true, message: '请填写商品总数量', trigger: 'change' }
        ]
      },
      // 状态
      statusOptions: [
        { value: '0', label: '未出库' },
        { value: '1', label: '全部出库' },
        { value: '2', label: '部分出库' }
      ],
      areaOptions: undefined,
      goodsListVisible: false,
      labelPosition: 'left',
      clientParams: {
        page: 1,
        limit: 9999,
        account_code: undefined,
        account_name: undefined
      },
      clientList: [],
      songhuofangName: [],
      shouhuofangName: [],
      selectList: []
    }
  },
  created() {
    this.getProject()
    this.areaOptions = getArea()
    if (this.$route.query.warehouse_out_id) {
      // 存在，编辑啊
      this.warehouse_out_id2 = this.$route.query.warehouse_out_id
      this.title = '编辑'
      this.getDetail()
      // this.form = JSON.parse(this.$route.query._form)
      // this.form.project_id = this.form.project_client
      // this.editBtnDisabled = true

      this.warehousing_status = this.$route.query.status
    } else {
      this.title = '添加'
      this.editBtnDisabled = false
      // if(window.localStorage.getItem('out_form')){
      //   this.form = JSON.parse(window.localStorage.getItem('out_form'))
      // }
    }
  },

  mounted() {
    // console.log(this)
    // 客户信息列表
    //this.getClientList()
    console.log(this.serial_1, this.serial_2, this.serial_3)
  },

  methods: {
    handleConfirm(val){
      let that = this
      if(that.current_click == 'song'){
        that.song_value = val.account_code + ' ' + val.account_key
        that.form.shipper_serial_number = val.serial_number
        that.form.shipper_relation_name = val.account_name
        that.form.shipper_relation_phone = val.relation_phone
        that.form.shipper_addr = val.addr
      }else if(that.current_click == 'shou'){
        that.shou_value = val.relation_name + ' ' + val.relation_phone
        that.form.consignee_serial_number = val.serial_number
        that.form.consignee_relation_name = val.account_name
        that.form.consignee_relation_phone = val.relation_phone
        that.form.consignee_addr = val.addr
      }else if(that.current_click == 'di'){
        that.di_value = val.account_code + ' ' + val.account_key
        that.form.deliver_serial_number = val.serial_number
        that.form.deliver__relation_name = val.account_name
        that.form.deliver_relation_phone = val.relation_phone
        that.form.deliver_addr = val.addr
      }
      that.dialogVisible = false
    },
    song_click(){
      console.log('song')
      let that = this
      that.dialogVisible = true
      that.current_click = 'song'
    },
    shou_click(){
      console.log('shou')
      let that = this
      that.dialogVisible = true
      that.current_click = 'shou'
    },
    di_click(){
      console.log('di')
      let that = this
      that.dialogVisible = true
      that.current_click = 'di'
    },
    diaclose(){
      this.dialogVisible = false
    },
    //下载发货单
    downloadDeliver() {
      var id = this.form.warehouse_out_id
      exportDeliver(id).then(res => {
        console.log(res)
        if (res.code === 10000) {
          var url = res.data.url
          window.open(url)
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    download() {
      var id = this.form.warehouse_out_id
      exportExcel(id).then(res => {
        console.log(res)
        if (res.code === 10000) {
          var url = res.data.url
          window.open(url)
          this.$message({
            message: '下载成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
    },
    downloadf() {
      var id = this.form.id
      if(this.form.customer_order_type == '销售出库'){
        exportPdf(id).then(res => {
          console.log(res)
          if (res.code === 10000) {
            var url = res.data.url
            window.open(url)
            this.$message({
              message: '下载成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }else{
        exportPdf1(id).then(res => {
          console.log(res)
          if (res.code === 10000) {
            var url = res.data.url
            window.open(url)
            this.$message({
              message: '下载成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    },
    change(e) {
      console.log('eeeee', e, this.serial_1)
      if (e) {
        this.clientList.forEach(item => {
          if (e.id == item.id) {
            this.form.shipper_serial_number = item.serial_number
            this.form.shipper_relation_name = item.account_name
            this.form.shipper_relation_phone = item.relation_phone
            this.form.shipper_addr = item.addr
          }
          console.log(this.form.shipper_serial_number, this.form.shipper_relation_name, this.form.shipper_relation_phone, this.form.shipper_addr)
        })
      } else {
        this.form.shipper_serial_number = ''
        this.form.shipper_relation_name = ''
        this.form.shipper_relation_phone = ''
        this.form.shipper_addr = ''
      }
    },
    change2(e) {
      console.log('eeeee', e)
      if (e) {
        this.clientList.forEach(item => {
          if (e.id == item.id) {
            this.form.consignee_serial_number = item.serial_number
            this.form.consignee_relation_name = item.account_name
            this.form.consignee_relation_phone = item.relation_phone
            this.form.consignee_addr = item.addr
          }
        })
      } else {
        this.form.consignee_serial_number = ''
        this.form.consignee_relation_name = ''
        this.form.consignee_relation_phone = ''
        this.form.consignee_addr = ''
      }
    },
    change3(e) {
      console.log('eeeee', e)
      if (e) {
        this.clientList.forEach(item => {
          if (e.id == item.id) {
            this.form.deliver_serial_number = item.serial_number
            this.form.deliver__relation_name = item.account_name
            this.form.deliver_relation_phone = item.relation_phone
            this.form.deliver_addr = item.addr
          }
        })
      } else {
        this.form.deliver_serial_number = ''
        this.form.deliver__relation_name = ''
        this.form.deliver_relation_phone = ''
        this.form.deliver_addr = ''
      }
    },
    getDetail() {
      let that = this
      const params = {
        warehouse_out_id: this.warehouse_out_id2
      }
      warehouseOutDetail(params).then((response) => {
        this.loading = false
        if (response.code == 10000) {
          this.form = response.data[0]
          // 确保 packing_box 是数组
          if (this.form.packing_box && !Array.isArray(this.form.packing_box)) {
            this.form.packing_box = this.form.packing_box.split(',').filter(Boolean)
          } else if (!this.form.packing_box) {
            this.form.packing_box = []
          }
          const arr = [
            response.data[0].project_id,
            response.data[0].project_client
          ]
          this.form.project_id = arr
          this.editBtnDisabled = true
          //重置
          let serial_numbers = []
          if(this.form.shipper_serial_number){
            serial_numbers.push(this.form.shipper_serial_number)
            //this.song_value = this.form.account_code + ' ' + this.form.account_key
          }
          if(this.form.consignee_serial_number){
            serial_numbers.push(this.form.consignee_serial_number)
            if(!serial_numbers.includes(this.form.consignee_serial_number)){
              serial_numbers.push(this.form.consignee_serial_number)
            }
          }
          if(this.form.deliver_serial_number){
            if(!serial_numbers.includes(this.form.deliver_serial_number)){
              serial_numbers.push(this.form.deliver_serial_number)
            }
            //serial_numbers.push(this.form.deliver_serial_number)
          }
          if(serial_numbers.length > 0){
            providerList({serial_number:serial_numbers}).then(response => {
              console.log('这里',response.data)
              let shipper_serial_number = this.form.shipper_serial_number
              let consignee_serial_number = this.form.consignee_serial_number
              let deliver_serial_number = this.form.deliver_serial_number
              response.data.forEach(function (item){
                if(item.serial_number == shipper_serial_number){
                  that.song_value = item.account_code + ' ' + item.account_key
                }
                if(item.serial_number == consignee_serial_number){
                  that.shou_value = item.relation_name + ' ' + item.relation_phone
                }
                if(item.serial_number == deliver_serial_number){
                  that.di_value = item.account_code + ' ' + item.account_key
                }
              })
            })
          }
          this.$nextTick(() => {
            this.$refs.warehouseOutSon.getData(this.form)
          })
        }
      })
    },
    // 客户信息列表
    getClientList() {
      providerList(this.clientParams).then((response) => {
        if (response.code === 10000) {
          this.clientList = response.data
          this.clientList.forEach(item => {
            if (this.form.shipper_serial_number == item.serial_number) {
              this.serial_1 = item
            }
            if (this.form.consignee_serial_number == item.serial_number) {
              this.serial_2 = item
            }
            if (this.form.deliver_serial_number == item.serial_number) {
              this.serial_3 = item
            }
          })
        }
      })
      att().then((response) => {
        if (response.code === 10000) {
          this.selectList = JSON.parse(JSON.stringify(response.data))
        }
      })
    },
    emptyHideFunc(v) {
      this.emptyHide = v
    },
    prints() {
      this.openOne = true
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    getRow(v, residueNum = 0) {
      this.clickGoodsForm = v
      // this.clickGoodsForm = JSON.parse(JSON.stringify(v))
      if (this.emptyHide) {
        this.$nextTick(() => {
          this.$refs.warehouseOutSonAddEdit.getQuery(this.clickGoodsForm)
        })
      }
      // console.log(2, this.clickGoodsForm)
      this.title = '编辑'
      this.warehousing_son_id = v.id
      // this.goodsNum()
      this.row_old_num = v.number
      this.existNumber = v.number
      this.residueNum = residueNum
      this.emptyHide = true
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.warehouse_out_son_id)
      this.multiple = !selection.length
    },
    // selectable(row, rowIndex) {
    //   // 索引是从0开始，条件1是指只有第2行数据不被禁用
    //   if (row.disabled === 'disabled') {
    //     return false // 禁用
    //   } else {
    //     return true // 不禁用
    //   }
    // },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.form.new_order_date === undefined) {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            that.form.new_order_date = year + '-' + month + '-' + day
          }

          if (!that.form.id) {
            createWarehouseOut(that.form).then((response) => {
              console.log('哈哈', response)
              if (response.code == 10000) {
                // window.localStorage.setItem('out_form', JSON.stringify(this.form))
                that.$notify.success(response.message)
                this.title = '编辑'
                this.editBtnDisabled = true
                that.form.id = response.data.id
                // this.warehouse_out_id2 = response.data.warehouse_out_id
                that.open = false

                this.$store.dispatch('tagsView/delView', this.$route)

                that.$router.push({
                  path:
                    '/storehouse/warehouseOut2/AddEdit:' +
                    response.data.warehouse_out_id,
                  query: {
                    warehouse_out_id: response.data.warehouse_out_id,
                    status: response.data.status,
                    _form: JSON.stringify(response.data),
                    AllNumber: response.data.goods_number
                  }
                })
                this.getDetail()
              }
              // that.open = false
              // that.getList()
            })
          } else {
            updateWarehouseOut(that.form).then((response) => {
              // window.localStorage.setItem('out_form', JSON.stringify(this.form))
              that.$notify.success(response.message)
              that.open = false
              this.editBtnDisabled = true
              that.$router.push({
                path:
                  '/storehouse/warehouseOut2/AddEdit:' +
                  response.data.warehouse_out_id,
                query: {
                  warehouse_out_id: response.data.warehouse_out_id,
                  status: response.data.status,
                  _form: JSON.stringify(response.data),
                  AllNumber: response.data.goods_number
                }
              })

              this.getDetail()
              // that.getList()
            })
          }
        } else {
          return false
        }
        // this.zhudan = true;
        // console.log(this.zhudan,'1111111111');
      })
    },
    nameShou() {
      const rest = this.clientList.filter(
        (item) => item.serial_number == this.form.consignee_serial_number
      )
      if (rest.length != 0) {
        console.log(rest, 'rest')
        this.form.consignee_relation_name = rest[0].account_name
        this.form.consignee_relation_phone = rest[0].relation_phone
        this.form.consignee_addr = rest[0].addr || ''
      } else {
        this.form.consignee_relation_name = ''
        this.form.consignee_relation_phone = ''
        this.form.consignee_addr = ''
      }
    },
    selectChange(ID) {
      const rest = this.selectList.filter((item) => item.config_id == ID)
      if (rest.length != 0) {
        this.form.delivery_addr = rest[0].name
        this.form.delivery_config_name = rest[0].serial_number
      } else {
        this.form.delivery_addr = ''
        this.form.delivery_config_name = ''
      }
    },
    getProject() {
      getProject({}).then((response) => {
        this.project = response.data
        // this.form.project_id =  this.form.project_client
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  /deep/ button {
    border-radius: 0;
  }
  /deep/ .el-tabs__header {
    .el-tabs__nav {
      display: flex;
    }

    .el-tabs__item {
      display: flex;
      height: 1.2813rem;
      line-height: 1.2813rem;
    }
  }
  ///deep/  .el-tabs__nav .el-tabs__item{
  //  position: absolute;
  //  margin-bottom: -1.25rem;
  //  line-height: 1.25rem;
  //  height: 1.25rem;
  //}
  /deep/.el-form-item__label {
    width: 120px;
  }
  // /deep/ .el-form-item__content{
  //   // width: 9.375rem;
  // }
  height: calc(100vh - 5rem);
  font-size: 0.75rem !important;
  //padding: .9375rem 1.25rem;
  /deep/ label {
    font-size: 0.75rem !important;
    font-weight: 700;
  }
  /deep/ .el-button {
    padding: 0.1875rem 0.3125rem;
    overflow: auto;
    .app-container {
      height: auto;
    }
    /deep/ div {
      font-size: 0.75rem !important;
      line-height: 1 !important;
    }
  }

  .page-top {
    height: calc(30% - 5rem);
    overflow: auto;
    .app-container {
      height: auto;
    }
  }
  .page-center {
    /deep/ .el-table__cell {
      height: 1.5625rem !important;
    }

    height:  calc(50vh - 120px);
    overflow: auto;
    .app-container {
      height: auto;
    }
    /deep/ div {
      font-size: 0.75rem !important;
    }
  }
  .page-footer {
    height:  calc(50vh - 120px);
    overflow: auto;
    /deep/ div {
      font-size: 0.75rem !important;
    }
    /deep/ .width-ku {
      .el-form-item__content {
        width: auto;
      }
    }
    /deep/ .sp-width {
      .el-form-item__content {
        width: auto;
      }
    }
    /deep/ .el-tabs__header {
      margin-bottom: 0.125rem;
    }
  }

  /deep/ .el-form {
    input {
      font-size: 12px;
      height: 20px;
      // width: 100px;
    }
    .el-form-item--mini.el-form-item {
      margin-bottom: 0;
    }
  }
  /deep/ .el-tabs__item {
    //padding: 0 .625rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  /deep/ .el-tabs--border-card {
    .el-tabs__content {
      padding: 0;
      .app-container {
        .el-form {
          input {
            font-size: 12px;
            height: 20px;
            width:150px !important;
          }
          .el-form-item {
            margin-bottom: 0 !important;
          }
        }
      }
    }
    .app-container {
      padding: 0.125rem 0.3125rem;
    }
  }
  /deep/ .el-table--mini .el-table__cell {
    padding: 0;
    .cell {
      line-height: 1;
    }
  }
  /deep/ .pagination-container {
    padding: 0 !important;
  }
  .el-empty {
    padding-top: 0;
    padding-bottom: 0;
  }
}
// .demo-ruleForm{

// }
/deep/ .aaa .el-select input{
  //width:200px !important;
}
.el-col-5 {
  width: 20%;
}
/deep/ .el-form input{
  width: 150px !important;
}
</style>
